<template>
  <div class="box">
 
      <div  v-for="(item,index) in maps" :key="item.id" @click="handleClick(index)" :class="['item', active === index ? 'active':'']">
        <div class="box-card">
          <img :src="item.image" class="image" alt="" />
          <div class="text">{{ item.name }}</div>
        </div>
      </div>
  </div>
</template>  
    
  <script setup>
import { MapManager } from '../../../api/gis2d/mapbase'

// 使用示例
const mapManager =   MapManager.getInstance();
const active = ref(3);
const maps = [
  {
    id: 1,
    name: '高德地图',
    cb: () => {
      mapManager.loadMapSource('gaode-vec')
    },
    image: '/static/icon/gdv.png'
  },
  {
    id: 11,
    name: '高德影像',
    cb: () => {
      mapManager.loadMapSource('gaode')
    },
    image: '/static/icon/gd.jpg'
  },
  {
    id: 111,
    name: '高德影像标注',
    cb: () => {
      mapManager.loadMapSource('gaode-mark')
    },
    image: '/static/icon/gd.jpg'
  },

  {
    id: 2,
    name: '天地图',
    cb: () => {
      mapManager.loadMapSource('tianditu-vec')
    },
   image: '/static/icon/tdtv.png'
  },
  {
    id: 21,
    name: '天地图影像',
    cb: () => {
      mapManager.loadMapSource('tianditu')
    },
     image: '/static/icon/tdt.png'
  },
  {
    id: 22,
    name: '天地图标注',
    cb: () => {
      mapManager.loadMapSource('tianditu-mark')
    },
    image: '/static/icon/gd.jpg'
  },
  {
    id: 3,
    name: '百度地图',
    cb: () => {
      mapManager.loadMapSource('baidu')
    },
    image: '/static/icon/bd.png'
  },
  // {
  //   id: 4,
  //   name: 'arcgis地图',
  //   cb: () => {
  //     mapManager.loadMapSource('arcgis')
  //   },
  //   image: '/static/icon/arcgis.png'
  // },
  // {
  //   id: 5,
  //   name: '谷歌地图',
  //   cb: () => {
  //     mapManager.loadMapSource('google')
  //   },
  //    image: '/static/icon/gd.jpg'
  // }
]

const handleClick = (i)=>{
  if(active.value == i){
    // active.value = -1;
    //    mapManager.unloadCurrentMapSource();
       return
  }
  active.value = i;
 maps[i].cb();
}


</script>  
    
  <style lang="scss" scoped>
  .box{
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    margin: 15px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    &::-webkit-scrollbar {
      width: 6px;
      height: 8px;
    }
    &::-webkit-scrollbar-button {
      display: none;
    }
    &::-webkit-scrollbar-thumb {
      background: #01c2ff;
      cursor: pointer;
      border-radius: 4px;
    }
    &::-webkit-scrollbar-corner {
      display: none;
    }
    &::-webkit-resizer {
      display: none;
    }
  }


.text {
  font-size: 16px;
  color: #fff;
  margin-top: 5px;
}
.item{
  height: 100px;
  width: 100px;
  margin-right:10px;
}
.box-card {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  img {
    width: 60px;
    height: 60px;
  }
}
.box-card:hover,.active {
  background-color: rgb(0, 25, 51);
    border: 1px solid #0e9cff;
    box-shadow: 0 0 10px #1678e1;
    border-radius: 8px;
}

</style>